<template>
  <div>
    <h2>任务列表</h2>

    <!-- 当没有任务时显示 -->
    <p v-if="allTasksCompleted && tasks.length > 0">所有任务已完成</p>
    <p v-if="tasks.length === 0">没有任务</p>

    <!-- 当有任务时显示 -->
    <ul v-else>
      <li v-for="task in tasks" :key="task.id">
        <span :class="{ 'completed': task.completed, 'not-completed': !task.completed }">
          {{ task.name }}
        </span>
        <button @click="toggleTaskStatus(task)">切换状态</button>
      </li>
    </ul>

    <p>已完成任务数: {{ completedTaskCount }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Task {
  id: number
  name: string
  completed: boolean
}
const tasks = ref<Task[]>([
  { id: 1, name: '学习 Vue 3', completed: false },
  { id: 2, name: '编写代码', completed: false },
  { id: 3, name: '阅读文档', completed: false }
])

const allTasksCompleted = computed(() =>
  tasks.value.length > 0 && tasks.value.every(task => task.completed)
);
const completedTaskCount = computed(() => tasks.value.filter((task) => task.completed).length)

const toggleTaskStatus = (task: Task) => {
  task.completed = !task.completed
}
</script>
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

.completed {
  color: green;
  text-decoration: line-through;
}

.not-completed {
  color: black;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}
</style>
